<template>
	<view class="container" :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">我的收藏</block>
		</cu-custom>
		<tui-swipe-action :actions="actions" @click="handButton" v-for="(item,index) in dataList" :key="index" :params="item" :index="index">
			<template v-slot:content>
				<view class="list-item"  @click="navShop" :data-id="item.goods_id">
					<image :src="item.goodsImg" class="item-img"></image>
					<view class="item-box">
						<view class="item-title text-cut">{{item.goodsName}}</view>
						<view class="item-title1 text-price text-colorP">{{item.shopPrice}}</view>
						<!-- <view class="item-time">2019-06-01</view> -->
					</view>
				</view>
			</template>
		</tui-swipe-action>
		<no-content :showType="'exchange'" v-if='noContentShow'></no-content>
		<tui-divider width="60%" :gradual="true"  v-if='!noContentShow'>没有更多了</tui-divider>
	</view>
</template>

<script>
	import tuiSwipeAction from "./component/swipe-action.vue"
	import tuiDivider from './component/divider.vue'
	import noContent from './component/noContent.vue'
	export default {
		components: {
			tuiSwipeAction,
			tuiDivider,
			noContent
		},
		data() {
			return {
				dataList: [],
				actions: [{
					name: '取消收藏',
					color: '#fff',
					fontsize: 30, //单位upx
					width: 80, //单位px
					background: '#ed3f14'
				}],
				page: 1,
				pageCount: 1,
				CustomBar: this.CustomBar,
				noContentShow:false
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			navShop(e){
				uni.navigateTo({
					url: '/pages/cloudMall/productDetail?id='+e.currentTarget.dataset.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getList() {
				var that = this;
				this.$request({
					url: '/ShopCollect/get_collection_by_uid',
					data: {
						page: that.page
					},
					success: res => {
						if (res.data.status == 1) {
							var list = that.dataList
							var thisData = res.data.data.data
							if (thisData.length == 0) {
								that.noContentShow = true
								return
							}
							thisData.forEach(item => {
								list.push(item)
							})
							that.dataList = list
							that.pageCount = res.data.data.pageCount
							that.page++
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			handButton(e) {
				var that = this
				let index = e.index;
				let item = e.item;
				let menuTxt = ["删除", "修改", "收藏"][index];
				this.$request({
					url: '/ShopCollect/del',
					data: {
						goods_id: item.goods_id
					},
					success: res => {
						if (res.data.status == 1) {
							uni.hideLoading()
							var collectList = that.dataList
							collectList.forEach((item, index) => {
								if (item.goods_id == item.goods_id) {
									collectList.splice(index, 1)
								}
							})
							that.dataList = [...collectList]
							uni.showToast({
								title: '已取消收藏',
								icon: 'none'
							})
							if(that.dataList.length==0 && that.pageCount == that.page-1){
								that.noContentShow = true
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style>
	page {
		background: #fff !important
	}
</style>

<style scoped>
	page {
		background: #fff;
	}

	.container {
		background: #fff;
		min-height: 100%;
	}

	.list-item {
		padding: 30upx 20upx;
		display: flex;
		align-items: item;
		border-bottom: solid 1rpx #efefef;
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.item-img {
		width: 201rpx;
		height: 161rpx;
		margin-right: 20upx;
		display: block;
		border-radius: 8rpx;
	}

	.item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.item-title {
		font-size: 30upx;
		max-width: 450rpx;
	}

	.item-title1 {
		font-size: 28upx;
		max-width: 450rpx;
	}

	.item-time {
		color: #999;
		font-size: 24upx;
	}
</style>
